<template>
    <div class="shejigan">
         <div class="sheji-header">
	    		<span class="sheji-left"><img v-bind:src='fan'></span>
	    		<span class="sheji-center">{{msg}}</span>
	    		<span class="sheji-right"></span>
	    </div>
	    <div class="sheji-nav">
	    	<ul>
	    		<li v-for='(item,index) in items' @click="tabIndex = index"
	    		:class="{active:tabIndex == index}">{{item.text}}</li>
	    	</ul>
	    </div>
	    <div class="box">
	    	<div class="sheji-warp"  v-show="tabIndex == 0">
				<ul>
					<li class="left">
						<div v-for="test in infos">
							<img v-bind:src="test.imgs">
							<div class="left1">
								<ul>  
									<li>
									<p><img v-bind:src="test.img"></p>
									<p>{{test.text1}}</p>
									</li>
									<li>
										<p><img v-bind:src="test.xin"></p>
									<p>{{test.text2}}</p>
									</li>
								</ul>
							</div>
							<div class="left2">
								<h2>{{test.text3}}</h2>
							</div>
							
						</div> 
					</li>
					<li class="right">
						<div v-for="test in looks">
							<img v-bind:src="test.imgs">
							<div class="left1">
								<ul>  
									<li>
									<p><img v-bind:src="test.img"></p>
									<p>{{test.text1}}</p>
									</li>
									<li>
										<p><img v-bind:src="test.xin"></p>
									<p>{{test.text2}}</p>
									</li>
								</ul>
							</div>
							<div class="left2">
								<h2>{{test.text3}}</h2>
							</div>
						</div> 
					</li>
				</ul>
			</div>
			<div class="xia"  v-show="tabIndex == 1">
				<div class="wenzhang-warp" v-for='gop in gops'>
					<img v-bind:src="gop.img" class="wz-img">
					<h2>{{gop.text}}</h2>
					<p>
						{{gop.test}}
						<span><img v-bind:src='gop.dian'></span>
						<span>{{gop.sz}}</span>
						<span><img v-bind:src='gop.xin'></span>
						<span>{{gop.ss}}</span>
					</p>
				</div>
			</div>
		</div>
	    </div>
	   
    </div>
</template>

<script>
export default {
  name: 'shejigan',
  data () {
    return {
    	tabIndex:0,
    	fan:'../static/img/fanhiu.png',
    	msg:'设计感',
    	items:[
    		{text:'晒单'},{text:'文章'}
    	],
    	infos:[
    		{
	    		imgs:"../static/img/sheji-logo1.png",
	    		img:"../static/img/footer_wode.png",
	    		xin:"../static/img/sheji-xin.png",
	    		text1:"甜甜",
	    		text2:'6',
	    		text3:'香港正生纯银店买的本命年红色手绳，小鸡图案，鸡年佩...'
    		},
    		{
	    		imgs:"../static/img/sheji-logo2.png",
	    		img:"../static/img/footer_wode.png",
	    		xin:"../static/img/sheji-xin.png",
	    		text1:"莹莹",
	    		text2:'38',
	    		text3:'看出来这是什么了么？是老庙的K金鸡年胸针哦！！时尚...'
    		},
    		{
	    		imgs:"../static/img/sheji-logo3.png",
	    		img:"../static/img/footer_wode.png",
	    		xin:"../static/img/sheji-xin.png",
	    		text1:"叶付铭",
	    		text2:'4',
	    		text3:'小日本的牌子，三宅一生手表，还是蛮耐看的'
    		},
    		{
	    		imgs:"../static/img/sheji-logo4.png",
	    		img:"../static/img/footer_wode.png",
	    		xin:"../static/img/sheji-xin.png",
	    		text1:"无语",
	    		text2:'7',
	    		text3:'自己雕刻的翡翠竹节，冰种起荧光...'
    		},
    	],
    	looks:[
    		{
	    		imgs:"../static/img/sheji-img1.png",
	    		img:"../static/img/footer_wode.png",
	    		xin:"../static/img/sheji-xin.png",
	    		text1:"非鱼",
	    		text2:'4',
	    		text3:'小鹿小夜灯，做工精细，看起来就很用心的感觉，开着它...'
    		},
    		{
	    		imgs:"../static/img/sheji-img2.png",
	    		img:"../static/img/footer_wode.png",
	    		xin:"../static/img/sheji-xin.png",
	    		text1:"林屿森先森快归来",
	    		text2:'3',
	    		text3:'妈妈的本命年，一切都好。饰悟的手链 很喜欢~...'
    		},
    		{
	    		imgs:"../static/img/sheji-img3.png",
	    		img:"../static/img/footer_wode.png",
	    		xin:"../static/img/sheji-xin.png",
	    		text1:"森焚",
	    		text2:'9',
	    		text3:'JBL耳机，我用的这款是和一加手机的合作款，音质在这...'
    		},
    		{
	    		imgs:"../static/img/sheji-img4.png",
	    		img:"../static/img/footer_wode.png",
	    		xin:"../static/img/sheji-xin.png",
	    		text1:"188***46",
	    		text2:'8',
	    		text3:'虽然不贵，但这呆板的汉子们能给我礼物就很满...'
    		},
    	],
    	gops:[
    		{
    			img:"../static/img/wenzhang-logo1.png",
    			text:"那些不吐不快的抽纸盒",
    			test:'小糖君 | ',
    			dian:"../static/img/wenzhang-dian.png",
    			sz:'19479',
    			xin:"../static/img/sheji-xin.png",
    			ss:'21659'
    		},
    		{
    			img:"../static/img/wenzhang-logo2.png",
    			text:"质朴的生活美学",
    			test:'小糖君 | ',
    			dian:"../static/img/wenzhang-dian.png",
    			sz:'32451',
    			xin:"../static/img/sheji-xin.png",
    			ss:'12462'
    		},
    		{
    			img:"../static/img/wenzhang-logo3.png",
    			text:"渐变之美",
    			test:'小糖君 | ',
    			dian:"../static/img/wenzhang-dian.png",
    			sz:'8521',
    			xin:"../static/img/sheji-xin.png",
    			ss:'36514'
    		},
    	]
    }
  }
}
</script>


<style scoped lang="less">
 @import url(../assets/less/shejigan.less);
</style>
